<template>
  <div id="jon">
    <div @click="show3 = !show3" id="showoption">首页</div>

    <div >
      <el-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">采购</div>
          <div class="transition-box">销售</div>
          <div class="transition-box">库存</div>
          <div class="transition-box">资金</div>
          <div class="transition-box">报表</div>
          <div class="transition-box">资料</div>
          <div class="transition-box">商城</div>
          <div class="transition-box">设置</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Sideoption",
    data: () => ({
      show3: true
    })
  }
</script>

<style scoped>
  #jon{
    width: 150px;
    height: auto;
  }
  #showoption{
    margin-bottom: 1px;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 12px 5px;


  }
  .transition-box {
    margin-bottom: 1px;
    width: 150px;
    height: 30px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 12px 5px;


  }

</style>
